<template>
    <div :class='$style.container'>
        <div :class='$style.left'>
            <div class='text-center'>
                <a-avatar :size='80' :src='avatar'></a-avatar>
                <div class='text-center m-t-5'>{{$store.state.userInfo && $store.state.userInfo.username ? $store.state.userInfo.username : 'Hi~'}}</div>
            </div>
            <a-divider />
            <a-menu style='border-right:none' mode='inline' v-model:selectedKeys='selectedKeys' @select='setTabKey'>
                <a-menu-item v-for='tab in tabList' :key='tab.key'>{{tab.tab}}</a-menu-item>
            </a-menu>
        </div>
        <div :class='$style.right'>
            <div v-show='tabKey == "research"'>
                <div :class='$style.tabName'>{{tabList[0].tab}}</div>
                <Research @toggle='tab => toggle(tab)' />
            </div>
            <div v-show='tabKey == 1'>
                <template v-if='tabKey1Init'>
                    <div :class='$style.tabName'>{{tabList[1].tab}}</div>
                    <Tab1 />
                </template>
            </div>
            <div v-show='tabKey == 2'>
                <template v-if='tabKey2Init'>
                    <div :class='$style.tabName'>{{tabList[2].tab}}</div>
                    <Tab2 />
                </template>
            </div>
            <div v-show='tabKey == 3'>
                <template v-if='tabKey3Init'>
                    <div :class='$style.tabName'>{{tabList[3].tab}}</div>
                    <Tab3 />
                </template>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
    import { computed, reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from "vuex"
    import Research from './Research.vue'
    import Tab1 from './Tab1.vue'
    import Tab2 from './Tab2.vue'
    import Tab3 from './Tab3.vue'

    const props = defineProps<{
        profitSummary : any,
        transactionDetail : any,
        position : any,
        strategyProfit : any,
        benchmarkProfit : any
    }>()

    const emit = defineEmits<{
        (e : 'change', key : number)
    }>()

    

    const $store = useStore()

    const avatar = computed(() => {
        return $store.state.userInfo && $store.state.userInfo.head_portrait ?
        $store.state.userInfo.head_portrait : 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
    })

    const route = useRoute()

    const selectedKeys = ref<any[]>(['research'])
    const tabKey = ref('research')
    const tabKey1Init = ref(false)
    const tabKey2Init = ref(false)
    const tabKey3Init = ref(false)

    const tabList = reactive([
        {
        key: 'research',
        tab: '我的主页',
      },

      {
        key: 1,
        tab: '基本设置',
      },
      {
        key: 2,
        tab: '安全设置',
      },
      {
        key: 3,
        tab: '消息通知',
      }
    ]);

    function setTabKey({key}) {
        tabKey.value = key
        if(key == 1 && tabKey1Init.value == false) {
            tabKey1Init.value = true
        }

        if(key == 2 && tabKey2Init.value == false) {
            tabKey2Init.value = true
        }

        if(key == 3 && tabKey3Init.value == false) {
            tabKey3Init.value = true
        }

        emit('change', key)
    }


    function toggle(key) {
        selectedKeys.value = [key]
        setTabKey({key})
    }

    if(route.query.target == 'msg' ) {
        toggle(3)
    }

    


    
</script>

<style scoped lang='scss' module>
    .container{
        display: flex;
        .left{
            float: left;
            width: 200px;
            border: 1px solid $border-color;
            padding: 15px 0;
        }

        .right{
            margin-left: 50px;
            float: right;
            width: calc(100% - 50px - 180px);
        }
    }

    .tabName{
        font-size: 18px;
        margin-bottom: 20px;
    }
</style>